<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>

</head>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-sm text-center">
            <h1>
                pdf示例
            </h1>
          </div>
        </div>
        

        

        <div class="row">
            <div class="col-sm text-center" id="main" style="width: 600px;height:400px;"></div>
        </div>
    </div>
    
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '密度分布图'
          },
          tooltip: {
           trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type:'value',
            data:{{x}},
            name:'growth rate(%)'
            //data:{{date_list}}
          },
          yAxis: {
            type:'value',
            scale: true,
            name:'density'
          },
          series: [
            {
              type: 'line',
              data: {{y}},
              smooth: true,
              areaStyle: {}
            }
          ]
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        
    </script>
  </body>
</html>